<template>
    <div>
        <el-dialog
            :width="width"
            :visible.sync="visible"
            :close-on-click-modal="false"
            append-to-body
            top="0vh"
            @close="handleClose"
        >
            <video ref="video" class="video-js vjs-default-skin vjs-big-play-centered"></video>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            width: '',
            visible: false,
            player: null,
            options: {
                autoplay: true,
                controls: true,
                userActions: {
                    doubleClick: false
                },
                controlBar: {
                    volumePanel: {
                        inline: false
                    },
                    pictureInPictureToggle: false,
                    fullscreenToggle: false
                }
            }
        }
    },
    beforeUnmount() {
        if (this.player) {
            this.player.dispose()
        }
    },
    methods: {
        showDialog(options) {
            this.width = options.width + 40 + 'px'
            this.visible = true
            this.$nextTick(() => {
                this.player = this.$video(this.$refs.video, this.options)
                this.player.poster(options.poster)
                this.player.src(options.sources)
                this.player.width(options.width)
                this.player.height(options.height)
            })
        },
        handleClose() {
            this.player.reset()
        }
    }
}
</script>
<style>
.video-js .vjs-big-play-button {
    width: 1.63332em;
    border-radius: 50% !important;
    margin-left: -0.75em !important;
}
</style>
